<template>
	<view>
		<view class="head">
			<view class="head_left" @tap="back()">
				<image src="../../../static/wode/return.png" mode=""></image>
				<text>返回</text>
			</view>
			<view class="head_mid">
				兑换
			</view>
			<view class="head_right">
				提现规则
			</view>
		</view>
		<view class="body_top">
			<view class="item_top">
				<view class="item_top_left">
					猫币余额：<text>{{catnum}}</text>
				</view>
				<text class="item_top_right">100猫币=1元</text>
			</view>
			<view class="item_bottom">
				<input class="duihuanbox" type="text" value=""v-model="money"placeholder="输入猫币数量" @input="changeMoney" />
				<image src="../../../static/wode/duihuan.png" mode=""></image>
				<view class="duihuanbox">{{moneys}}元</view>
			</view>
		</view>
		<view class="body_bottom">
			<view class="bottom_title">
				提现到:
			</view>
			<view class="bottom_item">
				<view class="bottom_item_left" @tap="choiceZhifu">
					<image v-show="iszhifu" class="xuanze" src="../../../static/wode/xuanze1.png" mode=""></image>
					<image v-show="iszhifu==false" class="xuanze" src="../../../static/wode/xuanze.png" mode=""></image>
					<image class="logo" src="../../../static/wode/zhifu.png" mode=""></image>
					<text>支付宝</text>
				</view>
				<view class="bottom_item_right" @tap="changeNum">
					<view class="message">
						<text>小明</text>
						<text>13457984511</text>
					</view>
					<image src="../../../static/filter/more.png" mode=""></image>
				</view>
			</view>
			<view class="bottom_item">
				<view class="bottom_item_left" @tap="choiceWeixin">
					<image v-show="isweixin" class="xuanze" src="../../../static/wode/xuanze1.png" mode=""></image>
					<image v-show="isweixin==false" class="xuanze" src="../../../static/wode/xuanze.png" mode=""></image>
					<image class="logo" src="../../../static/wode/weixin.png" mode=""></image>
					<text>微信</text>
				</view>
				<view class="bottom_item_right">
					<view class="message">
						<text>小明</text>
						<text>13457984511</text>
					</view>
					<image src="../../../static/filter/more.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="btn">
			立即兑换
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money:'',
				moneys:'',
				iszhifu:true,
				isweixin:false,
				catnum:500,
				user_id:uni.getStorageSync('user_id')
			};
		},	
		onShow() {
			this.getuserNum()
		},
		methods:{
			back() { //返回
				uni.navigateBack({
					delta: 1
				})
			},
			getuserNum(){
				var me=this;
				var data={
					user_id:this.user_id
				}
				this.myAjaxNew({
					model: 'user',
					controllerName: 'userInfo',
					actionName: 'query',
					data:data,
					successBack: function(res) {
						console.log(res, '用户信息')
						me.catnum=res.data.data[0].cat_coin
					},
				})
			},
			changeMoney(){
				var containSpecial = RegExp(
					/[(\ )(\~)(\!)(\@)(\#)(\$)(\%)(\^)(\&)(\*)(\()(\))(\-)(\_)(\+)(\=)(\[)(\])(\{)(\})(\|)(\\)(\;)(\:)(\')(\")(\,)(\.)(\/)(\<)(\>)(\?)(\)(\u4e00-\u9fa5)(A-Za-z)]+/
				);
				if (containSpecial.test(this.money)==true||this.money==""||this.money<=0) {
					uni.showToast({
						title: '请输入正确的金额',
						icon: 'none'
					})
					return
				}else if(this.catnum<this.money){
					uni.showToast({
						title:'你没有那么多猫币哦',
						icon:'none'
					})
					return
				}else{
					this.moneys=this.money/100
				}
			},
			choiceWeixin(){
				this.isweixin=true;
				this.iszhifu=false;
			},
			choiceZhifu(){
				this.iszhifu=true;
				this.isweixin=false;
			},
			changeNum(){
				uni.navigateTo({
					url:'../changeNum/changeNum'
				})
			},
		}
	}
</script>

<style scoped>
.head{
	display: flex;
	justify-content: space-between;
	height: 162upx;
	background: #ffffff;
	padding: 0 24upx;
}
.head image{
	width: 20upx;
	height: 36upx;
	margin-right: 9upx;
}
.head_left{
	display: flex;
	align-items: center;
	color: #666666;
	font-size: 32upx;
	padding-top: 70upx;
}
.head_mid{
	color: #333333;
	font-size: 36upx;
	padding-top: 90upx;
}
.head_right{
	color: #333333;
	font-size: 32upx;
}
.body_top{
	margin-top: 20upx;
	background: #FFFFFF;
	padding:24upx 24upx 56upx 24upx;
}
.item_top{
	display: flex;
	justify-content: space-between;
	margin-bottom: 50upx;
}
.item_top_left{
	color: #333333;
	font-size: 32upx;
}
.item_top_right{
	color: #666666;
	font-size: 24upx;
}
.duihuanbox{
	height: 75upx;
	width: 240upx;
	background:#E6E6E6;
	border-radius: 75upx; 
	line-height: 75upx;
	text-align: center;
	font-size: 32upx;
	color: #333333;
}
.item_bottom{
	display: flex;
	justify-content: center;
	align-items: center;
}
.item_bottom image{
	width: 64upx;
	height: 30upx;
	padding: 0 20upx;
}
.bottom_title{
	font-size:32upx;
	color: #333333;
	line-height: 88upx;
	padding: 0 24upx;
}
.xuanze{
	width: 40upx;
	height: 40upx;
}
.logo{
	width: 58upx;
	height: 58upx;
	margin-left: 30upx;
	margin-right: 10upx;
}
.bottom_item{
	display: flex;
	justify-content: space-between;
	padding: 0 24upx;
	background: #FFFFFF;
	margin-bottom: 20upx;
	height: 120upx;
}
.bottom_item_left{
	display: flex;
	align-items: center;
}
.bottom_item_left text{
	color: #333333;
	font-size: 32upx;
}
.bottom_item_right image{
	width: 16upx;
	height: 28upx;
	margin-left: 20upx;
}
.bottom_item_right{
	display: flex;
	align-items: center;
}
.message{
	display: flex;
	flex-direction: column;
	color: #999999;
	font-size: 32upx;
}
.btn{
	position: absolute;
	bottom: 118upx;
	left: 24upx;
}
</style>
